<template>
	<view class="container">
		<u-form ref="uForm" label-position="left" label-width="auto" :model="formData" :rules="rules" :errorType="['message']">
			<view class="wd-form-wrapper">
				<u-form-item label="开始停卡日期" prop="startDate" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="formData.startDate" @click="startShow=true"></u-input>
				</u-form-item>
				<u-form-item label="收取停卡费用" prop="charge">
					<u-switch slot="right" size="40" inactive-color="#E8E8E8" active-color="#6D4BBE" v-model="formData.charge"></u-switch>
				</u-form-item>
				<u-form-item label="停卡费用（元）" prop="cost">
					<u-input type="text" placeholder="请输入" :placeholder-style="{color: '#999999'}" :clearable="false"  v-model="formData.cost"></u-input>
				</u-form-item>
			</view>
			<view class="wd-form-wrapper">
				<u-icon name="info-circle-fill" color="#F5C822" size="32" label="停卡后卡片将暂停使用，解除停卡后启用" label-color="#999999" label-size="24" label-pos="right" margin-right="8"></u-icon>
			</view>
		</u-form>
		<view class="wd-form-footer">
			<view class="wd-form-footer__btn">
				<u-button :custom-style="wd_button_primary" shape="circle" :ripple="true" @click="submit">确认停卡</u-button>
			</view>
		</view>
		
		<!-- 选择开始日期 -->
		<u-calendar mode="date" toolTip="请选择开始日期" :min-date="dateToday" max-date="2050-01-01" v-model="startShow" @change="startChange"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_card_id:0,
				formData: {
					startDate: '',
					charge: 0,
					cost: 0,
				},
				rules: {
					startDate: [{ required: true, trigger: ['change','blur'], message: '请选择开始停卡日期' }],
				},
				startShow: false,
				dateToday: '1950-01-01',
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.dateTodayInit()
		},
		onLoad(options) {
			this.user_card_id = options.user_card_id || 0;
		},
		methods: {
			dateTodayInit() {
				let date  = new Date(),
					year  = date.getFullYear(),
					month = date.getMonth() + 1,
					day   = date.getDate();
				month = month<10?'0'+month:month;
				day   = day<10?'0'+day:day;
				this.dateToday = year+'-'+month+'-'+day
			},
			// 请选择开始日期
			startChange(e) {
				this.formData.startDate = e.result
			},
			submit() {
				var that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						var user_card_id = that.user_card_id;
						var formData = that.formData;
						
						that.$core.post({url:'fitness.manage/vip_stop',data: {user_vip_id:user_card_id,start_date:formData.startDate,is_charge:formData.charge,cost:formData.cost},success:(ret)=>{
							
						}});
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 1rpx 0;
		background: #F6F6F6;
	}
</style>